<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script>

        $(function()
        {


            【1】bind
            bind('event name', eventData, function(event) {
                /* Act on the event */
                第二个参数为可选
            });
            $('').bind("click",function()
            {

            })


        【2】hover
            hover(function() {
                /* Stuff to do when the mouse enters the element */
            }, function() {
                /* Stuff to do when the mouse leaves the element */
            });

            $('#pan h5.head').hover(function()
            {
                $(this).next().hide();
            },function()
            {
                $(this).next().show();
            });

        【3】toggle
            toggle(function() {
                /* Stuff to do every *odd* time the element is clicked */
            }, function() {
                /* Stuff to do every *even* time the element is clicked */
            });

            $('').toggle(function()
            {
                $(this).next().
            },function()
            {

            });

        【4】冒泡事件+默认行为
        $('').click(function(event)
        {
            //这里是内容
            event.stopPropagation();
            //阻止了冒泡事件
        })

        $('a').click(function(event)
        {
            //阻止默认行为
            event.preventDefault();
        })

        $('a').click(function(event)
        {
            return false;//技能阻止默认行为也能阻止冒泡事件
        })

        【5】事件对象的属性

        一、事件对象常用的属性：
        event.type：获取事件的类型，触发元素的事件类型
        $("a").click(function(event) {
          alert(event.type); // "click"事件
        });
        event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标，可以确定元素在当前页面的坐标值，是以页面为参考点,不随滑动条移动而变化
        $("a").click(function(event) {
          alert("Current mouse position: " + event.pageX + ", " + event.pageY );
          return false;
        });
        event.target：获取触发事件的元素
        　　this和event.target的区别：

        　　　　js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

        　　　　this和event.target都是dom对象，可以转换为jquery对象：$(this)和$(event.target)

        $("a[href=http://www.baidu.com]").click(function(event) {
          alert(event.target.href);
          //event.target表示的就是a
          return false;
        });
        event.which：获取在鼠标单击事件中鼠标的左、中、右键（左键1，中间键2，右键3），在键盘事件中键盘的键码值
        $("a").mousedown(function(e){
            alert(e.which);
            return false;
        })
           $('input').keyup(function(e)
         {
            alert(e.which);//得到键盘按键
         })
        event.currentTarget : 获取冒泡前的当前触发事件的DOM对象, 等同于this
        二、事件对象常用的方法：

        event.preventDefault() ：阻止默认行为，可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了
        event.stopPropagation() ：阻止事件冒泡，事件是可以冒泡的，为防止事件冒泡到DOM树上，不触发任何前辈元素上的事件处理函数，可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了






        【5】事件接触绑定
        $('').bind('click',fun1=function()
        {

        })
        $('').click(function()
        {
            $(this).unbind('click');
            $(this).unbind();//没有参数表示接触所有绑定的事件
            $(this).unbind('click',fun1);//删除绑定函数1
        })
        .one()同bind()类似
        但是只在第一次点击的时候才会执行处理函数





        【6】模拟事件

        $('btn').bind('click',function(){

        })

        // 自动执行出发点击事件
        $('btn').trigger('click');


        $('btn').bind('myclixk',function()
        {

        })
        //执行自定义事件
        $('btn').trigger('myclixk');


        // 还可以传递参数
        $('btn').bind('myclixk',function(event,message1,message2)
        {

        })
        $('btn').trigger('myclixk',["yes","no"]);

        })
    </script>
</body>
</html>